<template>
	<view>
		<view class="wrap">
			<view class="u-tabs-box" style="border-top: 1rpx solid  rgba(0,0,0,.1);">
				<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
					:border-bottom="true" swiperWidth="750"></u-tabs-swiper>
			</view>
			<view>
				<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
					@animationfinish="animationfinish">
					<!-- 投标中 -->
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
							<view v-if="dataList.length !=0">
								<view v-for="(item,index) in dataList" :key="item.id">
									<taskCard :isDoing="isDoing" @joinTeam="joinTeam" :data="item"></taskCard>
								</view>
							</view>
							<view v-else>
								<u-divider style="margin-top: 200rpx;">暂无数据</u-divider>
							</view>
						</scroll-view>
					</swiper-item>
					<!-- 进行中 -->
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
							<view v-if="dataList.length !=0">
								<view v-for="(item,index) in dataList" :key="item.id">
									<taskCard :isDoing="isDoing" @joinTeam="joinTeam" :data="item"></taskCard>
								</view>
							</view>
							<view v-else>
								<u-divider style="margin-top: 200rpx;">暂无数据</u-divider>
							</view>
						</scroll-view>
					</swiper-item>
					<!-- 已完成 -->
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
							<view v-if="dataList.length !=0">
								<view v-for="(item,index) in dataList" :key="item.id">
									<taskCard :isDoing="isDoing" :data="item"></taskCard>
								</view>
							</view>
							<view v-else>
								<u-divider style="margin-top: 200rpx;">暂无数据</u-divider>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
			<view>
				<u-popup v-model="show" mode="center" width="600rpx" height="600rpx" border-radius="14" closeable
					close-icon-pos="top-right">

					<view class="contactUs">
						<view style="margin: 30rpx 0; font-size:34rpx;font-weight: 700;">
							请保存二维码，并微信扫码进群
						</view>
						<u-image width="300rpx" height="300rpx" :src="picSrc">
						</u-image>
						<view style="margin: 40rpx auto;">长按二维码保存到本地</view>
						<!-- <u-button @click="copy" class="button" shape="circle" style="width: 80%;margin: 40rpx 0;">保存到相册</u-button> -->
					</view>
				</u-popup>
			</view>
		</view>
	</view>
</template>

<script>
	import taskCard from "./component/taskCard.vue"
	export default {
		components: {
			taskCard
		},
		data() {
			return {
				picSrc: "",
				isDoing: 0,
				dataList: [],
				list: [{
					name: '投标中'
				}, {
					name: '进行中'
				}, {
					name: '已完成'
				}],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				show: false,
				quaryList: {
					status: "normal",
					page: 1,
					page_size: 10,
				},
			}
		},
		onLoad() {
			if (!this.$u.untils.isLogin()) return
		},
		onShow() {
			this.getDataList()
		},
		onHide() {
			this.dataList = []
		},
		onPullDownRefresh() {
			this.quaryList.page = 1
			this.dataList = []
			this.getDataList(() => {
				uni.stopPullDownRefresh()
			})
		},
		
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
				this.dataList = []
				// let status = ["normal", "doing", "close"]
				// this.quaryList.status = status[index]
				// this.isDoing = index
				// this.dataList = []
				// this.getDataList()
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				this.dataList = []
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				this.dataList = []
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				let status = ["normal", "doing", "close"]
				this.quaryList.status = status[current]
				this.isDoing = current
				this.getDataList()
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				this.quaryList.page++
				this.getDataList()
			},
			joinTeam(value) {
				if (!value) {
					this.$u.toast('系统正在分配进群二维码，请稍等')
					return
				}
				this.picSrc = value
				this.show = true
			},
			// 拿到数据
			getDataList(callback) {
				this.$u.api.myProList(this.quaryList).then(res => {
					this.dataList = [...this.dataList, ...res.data]
					callback && callback()
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	// page {
	// 	height: 100%;
	// 	background-color: rgb(244, 244, 244);
	// }

	.wrap {
		// display: flex;
		// flex-direction: column;
		// // height: calc(100vh - var(--window-top));
		width: 100%;
		overflow: hidden;
	}

	.swiper-box {
		overflow: hidden;
		// padding-bottom: 100rpx;
		// flex: 1;
		// height: calc(100% - 160rpx);
		height: calc(100vh - 300rpx);
	}

	.swiper-item {
		height: 100%;
	}


	.contactUs {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
	}

	.button {
		background-color: #1890ff;
		color: #FFFFFF;
		width: 100rpx;
	}
</style>
